<template>
  <s-layout>
    <view class="container">
      <!-- 表单容器 -->
      <view class="form-container">
        <!-- 页面标题 -->
        <view class="header-box">
          <text
            class="cicon-edit"
            style="color: #0052d9; font-size: 44rpx; margin-right: 20rpx"
          ></text>
          <text class="title">{{ formData.id ? "编辑" : "新增" }}企业档案</text>
        </view>

        <!-- 表单卡片 -->
        <view class="form-card">
          <!-- 基本信息标题 -->
          <fui-section
            title="基本信息"
            line-width="3px"
            line-color="#0052d9"
            isLine
            size="34"
            style="
              padding: 0;
              --fui-section-title-color: #1a1a1a;
              margin-bottom: 30rpx;
            "
          ></fui-section>

          <!-- 文件名称输入框 -->
          <fui-input
            label="文件名称："
            placeholder="请输入文件名称"
            v-model="formData.title"
            required
            style="
              --fui-input-label-color: #4f4e4e;
              --fui-input-color: #1a1a1a;
              margin-bottom: 40rpx;
            "
          >
            <text
              class="cicon-title"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx"
            ></text>
          </fui-input>

          <!-- 附件上传组件 -->
          <s-upload
            v-model="formData.files"
            :required="true"
            :max-image-count="maxImageCount"
            :max-file-count="maxFileCount"
            :max-video-count="maxVideoCount"
            :max-total-files="maxTotalFiles"
            :upload-url="uploadUrl"
          ></s-upload>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn-container">
        <view class="submit-btn" @click="handleSubmit">
          <text class="btn-text">提交企业档案</text>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
// 导入所需模块
import { ref } from "vue";
import sheep from "@/sheep";
import { onLoad } from "@dcloudio/uni-app";
import sUpload from "@/sheep/components/s-upload/s-upload.vue";

// ================ 常量配置 ================
// 上传URL地址
const uploadUrl = "/app_api.php?t=upload&op=image_upload&role=company&type=archival";

// 上传文件数量限制
const maxImageCount = ref(1); // 最大图片数量
const maxFileCount = ref(1); // 最大文件数量
const maxVideoCount = ref(0); // 最大视频数量
const maxTotalFiles = ref(1); // 最大附件总数量

// ================ 响应式数据 ================
// 表单数据
const formData = ref({
  id: null, // 档案ID，编辑时使用
  title: "", // 文件名称
  item_id: null, // 项目ID
  company_id: null, // 公司ID
  files: [], // 存储所有上传的文件
});

// ================ 表单验证与提交 ================
/**
 * 表单验证
 * @returns {boolean} 验证结果
 */
const validateForm = () => {
  // 验证文件名称
  if (!formData.value.title.trim()) {
    uni.showToast({ title: "请填写文件名称", icon: "none" });
    return false;
  }

  // 检查是否有任何文件上传
  if (formData.value.files.length === 0) {
    uni.showToast({ title: "请至少上传一个附件", icon: "none" });
    return false;
  }

  return true;
};

/**
 * 处理表单提交
 */
const handleSubmit = async () => {
  // 表单验证
  if (!validateForm()) return;

  // 显示加载提示
  uni.showLoading({ title: "提交中...", mask: true });
  console.log(`Submitting data:${formData.value.files}` );

  try {
    // 将文件数据转换为API所需的格式
    const apiData = {
      item_id: formData.value.item_id,
      company_id: formData.value.company_id,
      ca_title: formData.value.title,
      ca_type: formData.value.files?.[0].fileType,
      ca_url: formData.value.files?.[0].filePath, // 处理文件URL
    };

    // 编辑模式下添加ID
    if (formData.value.id) {
      apiData.id = formData.value.id;
    }

    console.log("API Data:", apiData);

    // 发送请求 - 使用qy_index API
    const res = await sheep.$api.qy_index.addDetail(apiData);

    // 隐藏加载提示
    uni.hideLoading();

    if (res.code === 200) {
      // 成功处理
      uni.showToast({
        title: "提交成功",
        icon: "success",
        duration: 2000,
      });

      // 延迟跳转回上一页，并在返回前触发刷新事件
      setTimeout(() => {
        // 先发出刷新事件通知，这样接收页面可以准备好
        uni.$emit('archiveDataUpdated', {
          timestamp: Date.now(),
          action: 'add'
        });
        
        // 然后再返回上一页
        uni.navigateBack();
      }, 1500);
    } else {
      // 错误处理
      uni.showToast({
        title: res.msg || "提交失败",
        icon: "none",
        duration: 3000,
      });
    }
  } catch (error) {
    // 异常处理
    uni.hideLoading();
    console.error("Submit Error:", error);
    const errorMsg =
      error instanceof Error ? error.message : "提交时发生未知错误";
    uni.showToast({
      title: `提交出错: ${errorMsg}`,
      icon: "none",
      duration: 3000,
    });
  }
};

// ================ 生命周期 ================
/**
 * 页面加载时触发
 */
onLoad((options) => {
  console.log("onLoad options:", options);

  // 重置表单状态
  formData.value = {
    id: null,
    title: "",
    item_id: null,
    company_id: null,
    files: [],
  };

  console.log("onLoad formData:", formData.value);
  
  // 存储 item_id 和 company_id 到表单
  if (options?.item_id) {
    formData.value.item_id = options.item_id;
  }
  if (options?.company_id) {
    formData.value.company_id = options.company_id;
  }

  // 处理编辑模式
  if (options?.id) {
    const id = parseInt(options.id, 10);
    if (!isNaN(id)) {
      formData.value.id = id;
      console.log("Editing mode, ID:", id);
      // TODO: Implement fetchRecordData(id);
    } else {
      console.warn("Invalid ID passed in options:", options.id);
    }
  } else {
    console.log("Creating new record.");
  }
});
</script>

<style lang="scss" scoped>
/* 页面容器 */
.container {
  padding: 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 页面标题区域 */
.header-box {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  .title {
    font-size: 40rpx;
    font-weight: 700;
    color: #1a1a1a;
  }
}

/* 表单卡片 */
.form-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.08);
}

/* 提交按钮容器 */
.submit-btn-container {
  padding: 40rpx 0;
  display: flex;
  justify-content: center;
}

/* 提交按钮 */
.submit-btn {
  width: 90%;
  height: 90rpx;
  background: linear-gradient(90deg, #0052d9, #0066ff);
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(0, 82, 217, 0.3);
  transition: all 0.3s;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 8rpx rgba(0, 82, 217, 0.3);
  }

  .btn-text {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
  }
}
</style>
